<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         :root {
            --nav-color: #292922;
            --bg-color: #fff;
            /* --green-color: #fff; */
        }
        
        [data-theme="dark"] {
            --nav-color: #fff;
            --bg-color: #131617;
            --green-color: red;
        }
        
        .theme-switch {
            display: inline-block;
            cursor: pointer;
        }
        
        .theme-switch .mode-container {
            display: flex;
        }
        
        #checkbox {
            display: none;
        }
        
        #checkbox:checked+.mode-container .light {
            display: inline-block;
        }
        
        #checkbox+.mode-container .light {
            display: none;
        }
        
        #checkbox:checked+.mode-container .dark {
            display: none;
        }
        
        #checkbox+.mode-container .dark {
            display: inline-block;
        }
        
        .theme-switch svg {
            fill: var(--nav-color);
        }
        
        .www {
            background-color: var(--bg-color);
            color: var(--nav-color);
        }
        
        .demo3 {
            color: var(--green-color);
        }
        
        .demo3 .wj {
            display: none;
        }
        
        .demo3 .wyf {
            display: block;
        }
        
        [data-theme="dark"] .demo3 .wj {
            display: block;
        }
        
        [data-theme="dark"] .demo3 .wyf {
            display: none;
        }
    </style>
</head>

<body>
    <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox">
    <span class="mode-container">
        <svg t="1621513904170" class="dark" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4673" width="30" height="30"><path d="M524.490551 1023.43355c-140.102939 0-271.81403-54.547017-370.878782-153.611769S0 639.045939 0 498.943c0-115.183242 36.995772-223.867918 106.944903-314.336142a523.825343 523.825343 0 0 1 119.276826-112.266563A533.035909 533.035909 0 0 1 376.55863 1.11192a25.584905 25.584905 0 0 1 30.036679 36.228225c-33.004527 64.320451-48.35547 125.621883-48.355471 193.012523 0 239.832899 195.110485 434.943383 434.943384 434.943383 67.39064 0 128.692072-15.350943 193.012523-48.35547a25.584905 25.584905 0 0 1 36.228225 30.036678 534.468663 534.468663 0 0 1-71.228375 150.336902 523.825343 523.825343 0 0 1-112.266563 119.276826 509.395457 509.395457 0 0 1-314.336142 106.944903zM336.18565 69.884144C163.538712 143.82452 51.16981 309.819383 51.16981 498.943 51.16981 759.90903 263.524521 972.26374 524.490551 972.26374c189.123617 0 355.11848-112.420072 429.058855-285.01584A451.98293 451.98293 0 0 1 793.132052 716.414691c-129.868977 0-251.908974-50.555772-343.707612-142.354411S307.018859 360.170475 307.018859 230.301498c0-55.109885 9.619924-108.019469 29.166791-160.417354z" fill="" p-id="4674"></path></svg>
        <svg t="1621513870993" class="light" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3831" width="30" height="30"><path d="M486.4 767.6416c-126.8224 0-230.0416-103.168-230.0416-230.0416S359.5264 307.5584 486.4 307.5584s230.0416 103.168 230.0416 230.0416-103.168 230.0416-230.0416 230.0416z m0-408.8832c-98.6112 0-178.8416 80.2304-178.8416 178.8416s80.2304 178.8416 178.8416 178.8416 178.8416-80.2304 178.8416-178.8416S585.0112 358.7584 486.4 358.7584zM486.4 256a25.6 25.6 0 0 1-25.6-25.6v-153.6a25.6 25.6 0 0 1 51.2 0v153.6a25.6 25.6 0 0 1-25.6 25.6zM486.4 1024a25.6 25.6 0 0 1-25.6-25.6v-153.6a25.6 25.6 0 0 1 51.2 0v153.6a25.6 25.6 0 0 1-25.6 25.6zM179.2 563.2h-153.6a25.6 25.6 0 0 1 0-51.2h153.6a25.6 25.6 0 0 1 0 51.2zM947.2 563.2h-153.6a25.6 25.6 0 0 1 0-51.2h153.6a25.6 25.6 0 0 1 0 51.2zM230.4 307.2a25.7024 25.7024 0 0 1-18.1248-7.4752l-102.4-102.4a25.6 25.6 0 0 1 36.1984-36.1984l102.4 102.4A25.6 25.6 0 0 1 230.3488 307.2zM128 921.6a25.6 25.6 0 0 1-18.1248-43.6736l102.4-102.4a25.6 25.6 0 0 1 36.1984 36.1984l-102.4 102.4a25.4976 25.4976 0 0 1-18.1248 7.4752zM844.8 921.6a25.7024 25.7024 0 0 1-18.1248-7.4752l-102.4-102.4a25.6 25.6 0 0 1 36.1984-36.1984l102.4 102.4a25.6 25.6 0 0 1-18.1248 43.6736zM742.4 307.2a25.6 25.6 0 0 1-18.1248-43.6736l102.4-102.4a25.6 25.6 0 0 1 36.1984 36.1984l-102.4 102.4a25.4976 25.4976 0 0 1-18.1248 7.4752z" fill="" p-id="3832"></path></svg>
    </span>
    </label>
    <span class="www">测试文字</span>
    <div class="demo3">
        <span class="wyf">
            王宇飞
        </span>
        <span class="wj">
            王捷
        </span>
    </div>
    <script>
        var btn = document.getElementById("checkbox")
        btn.onchange = function(evn) {
            if (evn.target.checked) {
                document.documentElement.setAttribute("data-theme", "dark")
            } else {
                document.documentElement.setAttribute("data-theme", "light")
            }
        }
    </script>
</body>